<template>
  <el-container class="main_con">
    <el-row class="filter_con" style="margin-bottom: 20px;">
      <el-col :span="3">
        <div class="grid-content bg-purple"><vimage style="width: 120px;" :src="detail.cover_img"></vimage></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <div class="info">
            <span>直播间标题:</span>
            <span>{{ detail.title }}</span>
          </div>
          <div class="info" style="margin-top: 20px;">
            <span>主播昵称:</span>
            <span>{{ detail.anchor_name }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <div class="info">
            <span>主播微信号:</span>
            <span>{{ detail.anchor_wechat }}</span>
          </div>
          <div class="info" style="margin-top: 20px;">
            <span>直播时间:</span>
            <span>{{ detail.start_time }} - {{ detail.end_time }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="filter_con">
      <div class="button_area"><el-button v-has size="medium" type="primary" @click="show = true">导入商品</el-button></div>
    </div>
    <div class="list_con">
      <el-table class="main-loading" :data="list" element-loading-text fit highlight-current-row>
        <el-table-column prop="name" width="275" label="商品">
          <template slot-scope="scope">
            <div class="proImg">
              <!-- <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.master" fit="fit"></vimage> -->
              <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.cover_img_url"></vimage>

              <span style="flex: 1;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="直播售价">
          <template slot-scope="scope">
            <span v-if="scope.row.price_type == 1">一口价:￥{{ scope.row.price }}</span>
            <span v-if="scope.row.price_type == 2">￥{{ scope.row.price }} ~ ￥{{ scope.row.price2 }}</span>
            <span v-if="scope.row.price_type == 3">原价:￥{{ scope.row.price }}现价:￥{{ scope.row.price2 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="库存">
          <template slot-scope="scope">
            {{ scope.row.goods.total - scope.row.goods.sell }}
          </template>
        </el-table-column>
        <el-table-column prop="sell" label="销量">
          <template slot-scope="scope">
            {{ scope.row.goods.sell }}
          </template>
        </el-table-column>
        <el-table-column prop="live_good" label="审核状态">
          <template slot-scope="scope">
            {{ scope.row.status | getaudit }}
          </template>
        </el-table-column>
        <el-table-column prop="live_good" label="上架状态">
          <template slot-scope="scope">
            {{ scope.row.pivot.is_sale == 1 ? '已上架' : '已下架' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="goodsOnSale(scope.row.room_goods_id,scope.row.pivot.is_sale)">{{ scope.row.pivot.is_sale == 1 ? '下架' : '上架' }}</el-button>
            <el-button v-has type="text" @click="pushRoomGoods(scope.row.room_goods_id)">推送</el-button>
            <el-button v-has type="text" @click="deleteRoomGoods(scope.row.room_goods_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="table_footer" v-show="total != 0">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div> -->
    </div>

    <el-dialog title="选择商品" :visible.sync="show" width="1000px"><selectproduct :data="list" @outData="outData"></selectproduct></el-dialog>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import {getlive, addRoomGoods, deleteRoomGoods, pushRoomGoods, goodsOnSale} from '@/api/mall/liver';
import Upload from '@/components/Upload/SingleImage2';
import selectproduct from './components/selectproduct.vue';
import {objextend} from '@/utils/index.js';
export default {
  data() {
    return {
      show: false,
      showWidth: '50%',
      pageType: 'productList',
      obj: {
        name: '',
        status: -1,
        begin_date: '',
        end_date: ''
      },

      form: {
        name: '', //	是	int	商品名称
        price_type: 1, //	是	int	价格类型，1：一口价（只需要传入price，price2不传） 2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传） 3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）
        price: '', //	是	int	商品价格
        price2: '', //	是	int	商品价格
        cover_img_url: '',
        room_goods_id: ''
        //
      },
      formRules: {
        name: [
          {
            required: true,
            message: '必须填写'
          },
          {
            min: 3,
            max: 32,
            message: '长度在 3 到32 个字符',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '必须填写'
          }
        ],
        price2: [
          {
            required: true,
            message: '必须填写'
          }
        ]
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      isCopy: true,
      dialogTableVisible: false,
      dialogqrcopy: '',
      detail: {}
    };
  },
  components: {
    DatePicker,
    Upload,
    selectproduct
  },
  created() {
    //判断商品列表性质
    switch (this.$route.name) {
      case 'productList':
        //销售中
        this.obj.status = 1;
        break;
      case 'productListStock':
        //仓库中
        this.obj.status = 0;
        break;
      default:
        //no code
        break;
    }
    this.pageType = this.$route.name;
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getdetail();
    }
  },
  computed: {},
  filters: {
    getaudit(status) {
      switch (status) {
        case 0:
          return '未审核';
          break;
        case 1:
          return '审核中';
          break;
        case 2:
          return '审核通过';
          break;
        case 3:
          return '审核驳回';
          break;
      }
    }
  },
  methods: {
    getdetail() {
      let data = {
        id: this.id
      };
      getlive(data).then(res => {
        let json = res.msg;
        this.detail = json;
        this.list = json.liveGoods;
      });
    },
    outData(list) {
      if (list) {
        let room_goods_ids = [];
        list.forEach(a => {
          room_goods_ids.push(a.room_goods_id);
        });
        let data = {
          room_goods_ids: room_goods_ids,
          id: this.detail.room_id
        };
        addRoomGoods(data).then(res => {
          this.getdetail();
        });
      }

      this.show = false;
    },
    deleteRoomGoods(id) {
      let _this = this;
      this.$confirm('确认删除？')
        .then(_ => {
          let data = {
            room_goods_id: id,
            id: _this.detail.room_id
          };
          deleteRoomGoods(data).then(res => {
            this.$message.success('删除成功');
            _this.getdetail();
          });
        })
        .catch(_ => {});
    },
    pushRoomGoods(id) {
      let _this = this;
      this.$confirm('确认推送商品？')
        .then(_ => {
          let data = {
            room_goods_id: id,
            id: _this.detail.room_id
          };
          pushRoomGoods(data).then(res => {
            this.$message.success('推送成功');
            _this.getdetail();
          });
        })
        .catch(_ => {});
    },
    goodsOnSale(id,status) {
      let _this = this;
      this.$confirm('确认操作？')
        .then(_ => {
          let data = {
            room_goods_id: id,
            id: _this.detail.room_id,
            status:status?0:1
          };
          goodsOnSale(data).then(res => {
            this.$message.success('操作成功');
            _this.getdetail();
          });
        })
        .catch(_ => {});
    },
    doCopy(orderNo) {
      this.$copyText(orderNo).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },

    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },

    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    getImage(data) {
      this.form.cover_img_url = data;
    },
    preview(vlue) {
      this.dialogTableVisible = !this.dialogTableVisible;
      let data = {
        id: vlue.id
      };
      getLinkUrl(data).then(res => {
        // console.log(res)

        this.dialogqrcopy = res.msg.link;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.info {
  font-size: 14px;
  color: #333;
  span:first-child {
    display: inline-block;
    width: 80px;
    margin-right: 10px;
    text-align: right;
  }
}
.proImg {
  display: flex;
  align-items: center;
}

.pro_t0 {
  color: #2d8cf0;
  background: #f0faff;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}

.pro_t1 {
  color: #e6a23c;
  background: #d2efe0;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}
.dialog_box {
  min-width: 300px;
  margin: auto;
}
.qrcopy {
  width: 50%;
  min-width: 200px;
  display: block;
  margin: auto;
}
.disf {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 20px;
  span {
    padding: 10px;
  }
}
</style>
